<template>
  <template v-for="item in menuData" :key="item.path">
    <!-- 无children的 -->
    <el-menu-item
      v-if="!item.children || item.children?.length === 0"
      :index="item.path"
      @click="toPage(item)"
    >
      <MenuTitle :item="item?.meta!" />
    </el-menu-item>
    <!-- 有children的 -->
    <!-- child==1个 -->
    <el-menu-item
      v-else-if="item.children && item.children?.length === 1"
      :index="item?.children[0].path"
      @click="toPage(item.children[0])"
    >
      <MenuTitle :item="item?.children[0]?.meta!" />
    </el-menu-item>
    <!-- child>1个 -->
    <el-sub-menu v-else :index="item.path">
      <template #title>
        <MenuTitle :item="item?.meta!" />
      </template>
      <template v-for="child in item.children" :key="child.path">
        <!-- child无children -->
        <el-menu-item
          v-if="!child.children || child.children?.length === 0"
          :index="child.path"
          @click="toPage(child)"
        >
          <MenuTitle :item="child?.meta!" />
        </el-menu-item>
        <!-- child有children -->
        <el-sub-menu v-else :index="child.path">
          <template #title>
            <MenuTitle :item="child?.meta!" />
          </template>
          <MenuItem :menu-data="child.children" />
        </el-sub-menu>
      </template>
    </el-sub-menu>
  </template>
</template>

<script setup lang="ts">
import { RouteRecordRaw, useRouter } from 'vue-router'
import MenuTitle from './MenuTitle.vue'
defineProps<{
  menuData: RouteRecordRaw[]
}>()
const router = useRouter()
// 跳转页面
const toPage = (route: RouteRecordRaw) => {
  if (route.meta?.target === '_blank') {
    const routerPath = router.resolve({ path: route.path })
    window.open(routerPath.href, '_blank')
  } else {
    router.push({ path: route.path })
  }
}
</script>
<script lang="ts">
export default {
  name: 'MenuItem'
}
</script>

<style scoped lang="scss"></style>
